<template>
  <div class="good-box">
    <div class="selection"><h3>商品精选</h3></div>
    <!-- <div class="selection"><img src="https://bpic.588ku.com/element_pic/20/06/30/2c8f11fc3033d0e138f1067085424958.jpg!/fw/253/quality/90/unsharp/true/compress/true"/></div> -->
    <van-sticky offset-top="5.5rem" style="width: 100%" @change="change">
      <!-- <img
      v-show="tabsBanner"
          style="width: 100%; height: auto"
          src="http://higuang365.com/public/images/common/promotion/zhongqiu.jpg"
          @click="$router.push('/giftbag')"
      /> -->
      <van-tabs
        class="white"
        v-if="category.length != 1"
        v-model:active="active"
        title-active-color="#d7b68e"
        background="transparent"
        line-width="16"
        line-height="6"
        color="#d7b68e"
        @click="categoryGoods"
      >
        <van-tab
          v-for="value in category"
          :key="value.cat_name"
          :title="value.cat_name"
        >
        </van-tab>
      </van-tabs>
    </van-sticky>
    <div class="good-list-box">
      <!-- <div class="good-list-mg" :style="{height:tabsBanner?'6rem':0}" ></div> -->
      <van-list
        v-model:loading="loading"
        :finished="finished"
        v-model:error="error"
        error-text="服务器累了，点击重新加载"
        finished-text="没有更多了"
        offset="500"
        @load="onLoad"
        :key="2"
      >
        <water-fall :goods="goods" :banner="banner" ref="waterfalls">
          <template v-slot:swipe>
            <van-swipe class="my-swipe good-card" :autoplay="5000" lazy-render>
              <van-swipe-item v-for="image in goodsBanner" :key="image.src">
                <a :href="image.url">
                  <img :src="image.src" />
                </a>
              </van-swipe-item>
            </van-swipe>
          </template>
          <template v-slot:activity1>
            <div class="good-card activity-card">
              <img
                class="card-image"
                src="//gw.alicdn.com/imgextra/i2/O1CN01YmZDis1TRAWQS98Z1_!!6000000002378-2-tps-342-346.png_.webp"
              />
              <div class="card-header">
                <span class="card-title">榜单·发现</span>
                <div class="card-subtitle">
                  <!---->进口购物指南
                  <div class="card-right"></div>
                </div>
              </div>
              <div class="card-content">
                <div class="board-item">
                  <img
                    class="rax-image board-img"
                    src="http://higuang365.com/public/images/be/f6/c7/fbd6213e1651cf3cf70ce9a10a0a848c150525b4.jpg"
                  />
                  <div class="board-mask"></div>
                  <span class="board-title">粲枝澜蔓胸針</span
                  ><span class="board-subtitle">火爆热销中</span>
                </div>
                <div class="board-item">
                  <img
                    class="rax-image board-img"
                    src="http://higuang365.com/public/images/80/c6/cc/959035d6fcbe54210f184024ec05fc627599779d.jpg"
                  />
                  <div class="board-mask"></div>
                  <span class="board-title">澳绿宝简约五月花项链</span
                  ><span class="board-subtitle">火爆热销中</span>
                </div>
              </div>
              <router-link to="/monthly" class="card-link"></router-link>
            </div>
          </template>
          <template v-slot:activity2>
            <div class="good-card activity-card">
              <img
                class="card-image"
                src="http://higuang365.com/public/images/common/promotion/xinpin.png_.webp"
              />

              <!-- src="//gw.alicdn.com/imgextra/i4/O1CN01NF9izL1sSsMlQDW2N_!!6000000005766-2-tps-342-127.png_.webp" -->
              <div class="card-header">
                <span class="card-title">新品来袭</span>
                <div class="card-subtitle">
                  <!---->发现更多
                  <div class="card-right"></div>
                </div>
              </div>
              <div class="card-content">
                <div class="price">
                  <span class="yen">¥</span><span class="number">196</span>
                </div>
                <span class="low-price-tips">美丽秘诀</span
                ><img
                  class="item-image"
                  src="http://higuang365.com/public/images/97/b4/d0/5bad3d0d1df421326bdf3b7c394cdd9d2b691c00.jpg"
                />
              </div>
              <router-link to="/monthly" class="card-link"></router-link>
            </div>
          </template>

          <template v-slot="slotProps">
            <!-- <a class="good-card" :href="'http://www.higuang365.com/wap/product-'+value.F_ProductId+'.html'+($store.state.userInfo.F_Question?'?parents_id='+$store.state.userInfo.F_Question:'')"> -->
            <div
              class="good-card"
              @click="
                $router.push({
                  path: '/product',
                  query: {
                    id: slotProps.value.F_ProductId,
                    parents_id: username,
                  },
                })
              "
            >
              <van-image
                class="product-img lazy-img"
                lazy-load
                :src="'http://higuang365.com/' + slotProps.value.F_pic_url"
              />
              <div class="good-desc">
                <div class="county">
                  <img
                    class="county-icon"
                    v-if="slotProps.value.F_yuliu2"
                    :src="'http://higuang365.com/' + slotProps.value.F_yuliu2"
                    alt=""
                  />

                  <div class="county-title">
                    {{ slotProps.value.F_BrandCountrie }}
                  </div>
                </div>

                <div class="title">{{ slotProps.value.F_Name }}</div>
                <span class="price"
                  >¥ <span>{{ slotProps.value.F_BdPrice }}</span></span
                >
                <!-- v-show="slotProps.value.F_BdPrice != slotProps.value.F_Price" -->
                <!-- 价格不一样价格不显示 -->
                <span class="estimate">￥{{ slotProps.value.F_Price }}</span>
                <span
                  class="share"
                  @click.stop="
                    addGoodsCart(
                      slotProps.value.F_yuliu3,
                      slotProps.value.F_ProductId
                    )
                  "
                >
                  <i class="iconfont icon-gouwuche1"></i>
                </span>
              </div>
            </div>
          </template>
        </water-fall>
      </van-list>
    </div>
  </div>
</template>
<script>
import { toRefs, reactive, nextTick } from "vue";
import { GetDSGoodsList, GetProductClass } from "@/api/home";
import { getCookie, addGoodsCart } from "@/lib/ecapi";
import waterfall from "@/components/lib/waterfall.vue";
export default {
  components: {
    "water-fall": waterfall,
  },
  setup() {
    const data = reactive({
      goods: [],
      // listbanner: [
      //   "https://img10.360buyimg.com/babel/jfs/t1/154825/27/19542/32051/603772f1E8d846eb2/2d75bb25cc4087a5.jpg.webp",
      //   "https://img11.360buyimg.com/babel/jfs/t1/157306/21/8835/35314/6038b775Ebd1e357b/7b4fa98e5e85e312.jpg.webp",
      //   "https://img30.360buyimg.com/babel/jfs/t1/168145/32/7162/38258/6033a763E2baeabff/4b92d9d8713b4c4a.jpg.webp",
      //   "https://img11.360buyimg.com/babel/jfs/t1/153373/14/20968/87036/6040435bE4b0af248/93a3655238a65105.jpg.webp",
      // ],
      // goodsBanner: [
      //   {
      //     src: "http://higuang365.com/public/images/3d/94/16/f9129ad947e4c2bd261bf0ed1c68051fd800f185.jpg",
      //   },
      //   {
      //     src: "http://higuang365.com/public/images/fc/2c/97/98d0c487b99f49eabb7bace6bc8ae6209e5db859.jpg",
      //   },
      //   {
      //     src: "http://higuang365.com/public/images/aa/a8/71/eb4ce35a510bb5d7f5babbfcc91acd4857cbfc28.jpg",
      //   },
      //   {
      //     src: "http://higuang365.com/public/images/3f/b6/e1/2a775f9b2d97a1a08fe1a0131893bfe1d443d1ac.jpg",
      //   },
      // ],
      products: {
        ques: "", //搜索关键字（商品编码，条码，商品名）
        pageNum: 1, //页码
        pageSize: 20, //每页显示条目数
        Strclass: "42", //分类ID
        Strlv: getCookie("MLV"), //等级ID（1会员，13plus，18店主） 不传默认1
      },
      error: false,
      loading: false,
      finished: false,
      Refresh: false,
      showherf: false,
      username: getCookie("S[MEMBER]"),
      active: 0,
      tabsBanner: false,
      category: [
        {
          cat_id: "nolb",
          cat_name: "精选",
          child_count: 2,
          goods_count: 0,
          icon: "9554a19716b3d91e3fc38449812c1e65",
          p_order: 0,
          parent_id: 0,
        },
      ],
      waterfalls: null,
      // banner: [{ name: "swipe" }, { name: "activity1" }, { name: "activity2" }],
      banner: [],
    });
    //加载
    const onLoad = async () => {
      data.loading = true;
      const res = await GetDSGoodsList(data.products);

      // data.finished = true;
      if (!res[0]) {
        data.error = true;
        data.loading = false;
        return;
      }
      data.goods.push(...res[1]);

      nextTick(() => {
        data.waterfalls.getHeight();
        data.loading = false;
        data.products.pageNum = data.products.pageNum + 1;
        if (res[1].length < data.products.pageSize) {
          if (!data.products.Strclass) {
            data.products.pageNum = 1;
            return;
          }
          data.finished = true;
        }
      });
    };
    //点击分类获取商品
    const categoryGoods = async () => {
      data.finished = false;
      data.products.Strclass = data.category[data.active].cat_id;
      data.products.pageNum = 1;
      data.waterfalls.resize();
      onLoad();
      data.goods = [];
      // document.getElementById("app").scrollTop = scrollGoods;
      if (scrollGoods > 0) {
        document.getElementById("app").scrollTop = scrollGoods;
      } else {
        return;
      }
      // document.getElementById("app").scrollTop = scrollGoods - 1;
    };
    let scrollGoods = 0;
    //记录分类位置
    const change = (isFixed) => {
      scrollGoods = document.getElementById("app").scrollTop;
      data.tabsBanner = isFixed;
    };
    //下拉刷新
    const refresh = async () => {
      data.products.pageNum = 1;
      data.finished = false;
      data.goods = [];
      data.Refresh = false;
      onLoad();
    };
    //加载分类
    const load = async () => {
      const res = await GetProductClass();
      if (!res[0]) {
        return;
      }

      res[1].map((item) => {
        if (!item.child_count && item.p_order < 30) {
          data.category.push(item);
        }
      });
      data.category.sort((a, b) => a.p_order - b.p_order).splice(1, 1);
      data.category.unshift({
        cat_id: "42",
        cat_name: "促销礼包",
        child_count: 0,
        goods_count: 0,
        icon: "927ae7d348d68659ed17f6aa6850ba9e",
        p_order: 10,
        parent_id: 41,
      });

      // console.log(data.category);
    };

    load();

    return {
      ...toRefs(data),
      onLoad,
      refresh,
      addGoodsCart,
      categoryGoods,
      change,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "@/common/style/mixin";
.good-box {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 6rem;
  // background: #fff;
  .good-list-box {
    min-height: 100vh;
    margin-top: 1rem;
  }
  .good-list {
    width: calc(100vw - 1rem);
    margin: auto;
  }
  .promotional {
    display: flex;
    width: calc(50% - 1rem);
    flex-direction: column;
    margin-left: 1rem;
    .promotion-item {
      flex: 1;
      img {
        width: 100%;
      }
    }
  }
  .selection {
    width: 100%;
    background: url("../../common/img/jingxuan.png_.webp") no-repeat;
    background-size: 100%;
    background-position-y: 0.6rem;
    h3 {
      // color: #7889fc;
      // text-shadow: 5px 2px 3px #b1bbff;
      color: #ff5c77;
      text-shadow: 5px 2px 3px #ffa0b0;
      font-size: 2rem;
    }
  }

  .good-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    width: calc(100% - 1rem);
    margin: 0 0.5rem;
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
  }
  .product-img {
    display: block;
    width: 100%;
    height: calc(50vw - 2rem);
    margin: 0 auto;
    border-radius: 1rem;
    overflow: hidden;
  }
  .good-desc {
    text-align: left;
    font-size: 1.2rem;
    padding: 1rem 1rem 0;
    position: relative;
    .county {
      display: flex;
      .county-icon {
        width: 2rem;
        height: 1.3rem;
      }
      .county-title {
        color: #999;
        margin-left: 0.5rem;
      }
    }

    .title {
      font-size: 1.3rem;
      // height: 3.2rem;
      line-height: 2rem;
      letter-spacing: 0.5px;
      margin-top: 2px;
      color: #222333;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .price {
      font-size: 1.3rem;
      color: #ff0036;
      font-weight: bold;
      line-height: 4rem;
      span {
        font-size: 1.7rem;
      }
    }
    .share {
      color: #3c8a58;
      position: absolute;
      right: 1rem;
      bottom: 1rem;
      z-index: 10;
      i {
        font-size: 2rem;
      }
    }
    .estimate {
      color: #c5c5c5;
      text-decoration: line-through;
      margin-left: 0.5rem;
    }
  }

  .my-swipe {
    height: calc(50vw - 2rem);
  }
  .activity-card {
    position: relative;
  }
  .card-image {
    width: 100%;
    height: auto;
    position: absolute;
    left: 0vw;
    top: 0vw;
  }
  .card-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-shrink: 0;
    position: relative;
    margin-top: 2.4vw;
    align-items: center;
    padding-left: 2.1333vw;
    padding-right: 2.1333vw;
  }
  .card-title {
    font-size: 4.2667vw;
    white-space: pre-wrap;
    font-weight: bold;
    text-align: left;
    color: #fff;
  }
  .card-subtitle {
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    flex-shrink: 0;
    align-items: center;
    font-size: 3.2vw;
    color: white;
  }
  .card-right {
    border-width: 0vw 0.2667vw 0.2667vw 0vw;
    border-style: solid;
    border-color: rgb(255, 255, 255);
    border-image: initial;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    flex-shrink: 0;
    width: 1.8667vw;
    height: 1.8667vw;
    transform: rotate(-45deg);
  }
  .card-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-shrink: 0;
    position: relative;
    margin-top: 2.4vw;
    padding: 3.2vw 2.4vw 2.4vw 2.1333vw;
    background: white;
    border-top-left-radius: 3.2vw;
    border-top-right-radius: 3.2vw;
  }
  .board-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
    align-items: flex-start;
    width: 19.7333vw;
  }
  .board-img {
    width: 19.7333vw;
    height: 19.7333vw;
    position: relative;
    object-fit: contain;
    border-radius: 0.8vw;
  }
  .board-mask {
    position: absolute;
    top: 0vw;
    left: 0vw;
    width: 19.7333vw;
    height: 19.7333vw;
    border-radius: 0.8vw;
    background: rgba(0, 0, 0, 0.05);
  }
  .board-title {
    font-size: 3.2vw;
    white-space: nowrap;
    color: #333;
    font-weight: 400;
    text-align: left;
    margin-top: 1.0667vw;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .board-subtitle {
    font-size: 3.2vw;
    white-space: nowrap;
    color: rgb(118, 52, 246);
    font-weight: 400;
    text-align: left;
    margin-top: 0.8vw;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .card-link {
    display: flex;
    position: absolute;
    left: 0vw;
    top: 0vw;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .low-price-tips {
    font-size: 3.2vw;
    white-space: pre-wrap;
    color: rgb(253, 58, 88);
    font-weight: 400;
    text-align: left;
    position: absolute;
    right: 22.6667vw;
    bottom: 2.4vw;
  }
  .item-image {
    width: 18.6667vw;
    height: 18.6667vw;
    position: relative;
    object-fit: contain;
  }
  .card-content {
    .price {
      align-items: center;
    }
    .yen {
      font-size: 4.2667vw;
      white-space: pre-wrap;
      color: rgb(253, 58, 88);
      font-weight: 400;
      text-align: left;
      font-family: tmall-price-ExtraBold;
    }
    .number {
      font-size: 6.4vw;
      white-space: pre-wrap;
      color: rgb(253, 58, 88);
      font-weight: 400;
      text-align: left;
      font-family: tmall-price-ExtraBold;
    }
  }
}
</style>
